<template>
  <div class="textbox"
       contenteditable="true"
       @input="handleInput"
       @blur="handleBlur"
       @focus="handleFocus"
       @paste="handlePaste"
       @keydown="handleKeydown"
       :placeholder="initPlaceholder"
       ref="textbox">
  </div>
</template>

<script>
  const commonUtil = require('../../../util/commonUtil')
  export default {
    name: 'VTextarea',
    data () {
      return {
        initPlaceholder: ''
      }
    },
    computed: {
      textbox () {
        return this.$refs.textbox
      }
    },
    mounted () {
      this.textbox.innerHTML = this.value
      this.refreshPlaceholder()
    },
    watch: {
      value () {
        this.refreshPlaceholder()
        if (this.textbox.innerHTML !== this.value) {
          this.textbox.innerHTML = this.value
        }
      }
    },
    methods: {
      handleKeydown (ev) {
        if (this.$listeners.keydown) {
          this.$listeners.keydown(ev)
        }
      },
      handlePaste () {
        event.preventDefault()
        let clipboardData = event.clipboardData
        let types = clipboardData.types
        console.log(types)
        // let html = clipboardData.getData('text/html')
        let plain = clipboardData.getData('text/plain')
        if (plain) {
          let div = document.createElement('pre')
          div.innerText = plain
          this.insertHtml(div.outerHTML)
        } else if (types.indexOf('Files') !== -1) {
          for (let i = 0; i < clipboardData.files.length; i++) {
            let file = clipboardData.files[i]
            if (/image\//i.test(file.type)) {
              let reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onload = (e) => {
                let result = reader.result
                let html = `<img src="${result}" >`
                this.insertHtml(html)
              }
            }
          }
        }
      },
      handleBlur (ev) {
        // getSelection().removeAllRanges()
        this.$emit('blur', ev)
      },
      handleFocus (ev) {
        // getSelection().removeAllRanges()
        this.$emit('focus', ev)
      },
      refreshPlaceholder () {
        if (this.value !== undefined && this.value.length) {
          this.initPlaceholder = ''
        } else {
          this.initPlaceholder = this.placeholder
        }
      },
      handleInput () {
        this.$emit('input', this.textbox.innerHTML)
      },
      insertHtml (html = '') {
        commonUtil.insertHtml(html, this.textbox)
        this.handleInput()
      }
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      placeholder: String
    }
  }
</script>

<style scoped lang="scss">
  .textbox {
    background-color: white;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box;

    &::before {
      content: attr(placeholder);
      color: #ccc;
      cursor: text;
      box-sizing: border-box;
    }

    &:focus {
      border-color: #54c3cc !important;
    }
  }
</style>
